<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
        <Select placeholder="邮件状态" v-model="tParam.type" class="y_condition" clearable style="text-align: left;width: 120px;">
          <Option value="3">需人工处理</Option>
          <Option value="1">待处理</Option>
          <Option value="2" >处理成功</Option>
        </Select>
        <DatePicker placeholder="开始时间" type="datetime" v-model="tParam.startTime" format="yyyy-MM-dd HH:mm"
                    style="min-width: 150px" class="y_condition"></DatePicker>
        -
        <DatePicker placeholder="截止时间" type="datetime" v-model="tParam.endTime" format="yyyy-MM-dd HH:mm"
                    class="y_condition"></DatePicker>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
      </i-col>
    </Row>
    <br>
    <List>
        <list-item class="list_item" v-for="(item,index) in tData.emailList">
          <div style="width:100%;padding: 0 0.5rem;"  >
            <Row justify="space-between">
              <i-col flex="1" style="text-align: left;" >
                <span>{{index+1}}.</span>
                <span style="font-weight: 500;font-size: 0.8rem">{{ item.subject }}</span>
              </i-col>
              <i-col >
                <Button v-if="item.senderName == 1" size="small"  @click="dealFailEmail(item.id)" type="info" ghost style="margin-left: 0.5rem">处理</Button>
                <Button v-if="item.senderName == 2" size="small"  @click="deleteFailEmail(item.id)" type="error" ghost style="margin-left: 0.5rem">删除</Button>
              </i-col>
            </Row>
            <Row justify="end" >
              <i-col>
                <Tag v-if="item.senderName == null|| item.senderName == ''" color="error">需人工处理</Tag>
                <Tag v-if="item.senderName == 2" color="success">处理成功</Tag>
                <Tag type="border" color="purple" style="margin-right: 1rem">收件人：{{ item.emailTo }}</Tag>
                <Tag color="red" v-if="item.tags!=null && item.tags.length>0">
                  {{parseTags(item.tags).join(",")}}
                </Tag>
                <KeyValueView title="时间">{{ $tiyBJTime(new Date(item.createTime).getTime()) }}</KeyValueView>
              </i-col>
            </Row>
          </div>
        </list-item>
    </List>

    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>

  </div>
</template>

<script>
import tiyData from "./js/failEmail/fail_data";
import {webList,dealFailEmail,deleteFailEmail} from "./js/failEmail/fail_fun";
import KeyValueView from "../widgets/KeyValueView";


export default {
  data() {
    return {
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      tData: tiyData.tData,
      tStatus: tiyData.tStatus,
    }
  },
  components: {KeyValueView},
  methods: {
    search() {
      webList(this, tiyData);
    },

    dealFailEmail(id){
      this.$Modal.confirm({
        title: "确认",
        content: "确认处理失败邮件吗！",
        onOk: () => {
          dealFailEmail(this, tiyData,id);
        }
      });
    },

    deleteFailEmail(id){
      this.$Modal.confirm({
        title: "确认",
        content: "确认删除该失败邮件吗，此操作无法撤回！",
        onOk: () => {
          deleteFailEmail(this, tiyData,id);
        }
      });
    },

    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      webList(this, tiyData);
    },
  },
  created() {
      tiyData.tParam.isAll = false;
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.list_value {
  font-size: 13px;
  color: @tiyTextDescColor;
  padding-right: 1rem;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
